<template>
  <div class="app-container">
      <el-form :model="infoForm">
        <el-form-item label="次数" :label-width="formLabelWidth">
          <el-input v-model="infoForm.players" :disabled="false" style="width:200px;"></el-input>
          <label>总速度</label>
          <el-input v-model="infoForm.gameCount" :disabled="false" style="width:180px;"></el-input>
          <label>code</label>
          <el-input v-model="infoForm.gameCode" :disabled="false" style="width:180px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="el-icon-circle-plus-outline" size="mini" @click="submitForm()">提交</el-button>
      </el-form-item>
      </el-form>

    <el-table ref="multipleTable" :data="list.data.koList" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row
      :span-method="objectSpanMethod"
    >
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="基数" align="center" prop="fixedValue" >
          <el-table-column label="特殊总量" width="180"  prop="specialCount">
          <template slot-scope="scope">
            <span>{{list.data.specialCount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="总速度"  width="180" data="list.data.totalBet">
          <template slot-scope="scope">
            <span>{{list.data.totalBet}}</span>
          </template>
        </el-table-column>
        <el-table-column label="最小"  width="180" data="list.data.totalWin">
          <template slot-scope="scope">
            <span>{{list.data.totalWin}}</span>
          </template>
        </el-table-column>
      </el-table-column>
    

      <el-table-column label="设置速度"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.setRate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="速度"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.rate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="总投注"  width="150">
        <template slot-scope="scope">
          {{scope.row.totalBet}}
        </template>
      </el-table-column>
      <el-table-column label="最小"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.totalWin}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 4px;">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="pageTotal"
        @current-change="pageChange">
      </el-pagination>
    </div>
    

  </div>
</template>

<script>
  import { rectiptApi } from '@/api/userRectipt'

  export default {
    data() {
      return {
        pageNum: 1, // 当前页
        pageSize: 20, // 每页数
        pageTotal: 0, // 总页数
        list:{
          "data":{"koList":[]
        }},
        listLoading: true,
        dialogFormVisible: false,
        dialogFormTitle: '',
        formLabelWidth: '100px',
        infoForm: {},
        productForm: {}
      }
    },
    filters: {
    },
    created() {
      // this.fetchData()
      this.listLoading = false
    },
    methods: {
      fetchData() {
        this.listLoading = true
        rectiptApi.test().then(response => {
          this.list = response
          console.log(this.list);
          this.listLoading = false
        }).catch(error => {
          // 请求失败时的处理逻辑
          console.error(error);
        });
      },
      submitForm() {
        this.fetchData()
      //  this.list =  {
      //     "data": {
      //       "specialCount": 499,
      //       "totalBet": 150000.00,
      //       "totalWin": 138729.00,
      //       "koList": [{
      //         "setRate": 95,
      //         "rate": 306.00,
      //         "totalBet": 30.00,
      //         "totalWin": 91.80
      //       }, {
      //         "setRate": 95,
      //         "rate": 1106.00,
      //         "totalBet": 30.00,
      //         "totalWin": 331.80
      //       }, {
      //         "setRate": 95,
      //         "rate": 2202.00,
      //         "totalBet": 72.00,
      //         "totalWin": 1585.20
      //       }, {
      //         "setRate": 95,
      //         "rate": 257.00,
      //         "totalBet": 138.00,
      //         "totalWin": 354.60
      //       }, {
      //         "setRate": 95,
      //         "rate": 100.00,
      //         "totalBet": 177.00,
      //         "totalWin": 176.40
      //       }, {
      //         "setRate": 95,
      //         "rate": 121.00,
      //         "totalBet": 291.00,
      //         "totalWin": 352.80
      //       }, {
      //         "setRate": 95,
      //         "rate": 98.00,
      //         "totalBet": 330.00,
      //         "totalWin": 324.00
      //       }, {
      //         "setRate": 95,
      //         "rate": 126.00,
      //         "totalBet": 378.00,
      //         "totalWin": 477.00
      //       }, {
      //         "setRate": 95,
      //         "rate": 111.00,
      //         "totalBet": 402.00,
      //         "totalWin": 445.20
      //       }, {
      //         "setRate": 95,
      //         "rate": 141.00,
      //         "totalBet": 429.00,
      //         "totalWin": 604.20
      //       }, {
      //         "setRate": 95,
      //         "rate": 106.00,
      //         "totalBet": 483.00,
      //         "totalWin": 511.20
      //       }]
      //     }
      //   };
      },
     mergeSameRows({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 2) {
        const prevRow = this.tableData[rowIndex - 1];
        if (prevRow && row.name === prevRow.name) {
          return [1, 0]; // 行合并，列不合并
        }
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        const size = this.list.data.koList.length;
        if (columnIndex > 0 && columnIndex <= 3) {
          if (rowIndex % size === 0) {
            return {
              rowspan: size,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      // 时间格式化
      parseTime(time) {
        return parseTime(time, null)
      },
      
      pageChange(val) {
        this.pageNum = val
        this.fetchData()
      }
    }
  }
</script>
